<style scoped lang="less"></style>
<template>
  <div>
    <Row>
      <Col span="24">
        <Card style="margin-bottom: 10px">
          <Form inline>
            <FormItem style="margin-bottom: 0">
              <Select v-model="searchConf.type" clearable placeholder="请选择类别" style="width:100px">
                <Option :value="1">店铺名</Option>
                <Option :value="2">手机号</Option>
              </Select>
            </FormItem>
            <FormItem style="margin-bottom: 0">
              <label>
                <Input v-model="searchConf.keywords" placeholder=""></Input>
              </label>
            </FormItem>
            <FormItem style="margin-bottom: 0">
              <Button type="primary" @click="search">{{ $t('find_button') }}/{{ $t('refresh_button') }}</Button>
            </FormItem>
          </Form>
        </Card>
      </Col>
    </Row>
    <Row>
      <Col span="24">
        <Card>
          <!--        <QAuth :access="'admin/User/add'">-->

          <!--        </QAuth>-->

          <div>
            <Table :columns="columnsList" :data="tableData" border disabled-hover></Table>
          </div>
          <div class="margin-top-15" style="text-align: center">
            <Page :total="tableShow.listCount" :current="tableShow.currentPage"
                  :page-size="tableShow.pageSize" @on-change="changePage"
                  @on-page-size-change="changeSize" show-elevator show-sizer show-total></Page>
          </div>
        </Card>
      </Col>
    </Row>
  </div>
</template>
<script>
  import {getList} from '@/api/stores'

  const deleteButton = (vm, h, currentRow, index) => {
    return h('Poptip', {
      props: {

        confirm: true,
        title: '您确定要删除这条数据吗? ',
        transfer: true
      },
      on: {
        'on-ok': () => {
          del(currentRow.id).then(response => {
            vm.tableData.splice(index, 1)
            vm.$Message.success(response.data.msg)
          })
          currentRow.loading = false
        }
      }
    }, [
      h('Button', {
        style: {
          margin: '0 5px'
        },
        props: {
          size: 'small',
          type: 'error',
          placement: 'top',
          loading: currentRow.isDeleting
        }
      }, vm.$t('delete_button'))
    ])
  };
  const editButton = (vm, h, currentRow, index) => {
    return h('Button', {
      props: {
        size: 'small',
        type: 'primary'
      },
      style: {
        margin: '0 5px'
      },
      on: {
        'click': () => {
          vm.$router.push('/stores/stores-edit/' + currentRow.id);
        }
      }
    }, vm.$t('edit_button'))
  };
  const viewButton = (vm, h, currentRow, index) => {
    return h('Button', {
      props: {
        size: 'small',
        type: 'default'
      },
      style: {
        margin: '0 5px'
      },
      on: {
        'click': () => {
          vm.$router.push('/stores/stores-edit/' + currentRow.id + '/1');
        }
      }
    }, vm.$t('view_button'))
  };
  const createActiveButton = (vm, h, currentRow, index) => {
    return h('Button', {
      props: {
        size: 'small',
        type: 'success'
      },
      style: {
        margin: '0 5px'
      },
      on: {
        'click': () => {
          vm.$router.push('/actives/active-create/' + currentRow.id);
        }
      }
    }, '创建活动')
  };
  const userButton = (vm, h, currentRow, index) => {
    return h('Button', {
      props: {
        size: 'small'
      },
      style: {
        margin: '0 5px'
      },
      on: {
        'click': () => {
          vm.$router.push('/stores/store-user/' + currentRow.id);
        }
      }
    }, '核销员')
  };
  export default {
    name: 'stores_list',
    data() {
      return {
        columnsList: [
          {
            title: '序号',
            type: 'index',
            width: 65,
            align: 'center'
          },
          {
            title: '手机号',
            align: 'center',
            key: 'phone',
            width: 140
          },
          {
            title: '店铺名',
            align: 'center',
            key: 'name',
            width: 120
          },
          {
            title: '地址',
            align: 'center',
            key: 'address',
            width: 220
          },
          {
            title: '创建日期',
            align: 'center',
            key: 'create_time',
            width: 180
          },
          {
            title: '会员到期时间',
            align: 'center',
            render: (h, params) => {
              return h('span', params.row.expiration_time === null ? '' : params.row.expiration_time)
            },
            width: 180
          },
          {
            title: '操作',
            align: 'center',
            render: (h, params) => {
              return h('div', params.row.level===this.GLOBAL.LEVEL_SELF?[
                userButton(this, h, params.row, params.index),
                createActiveButton(this, h, params.row, params.index),
                viewButton(this, h, params.row, params.index),
                editButton(this, h, params.row, params.index)
              ]:[
                userButton(this, h, params.row, params.index),
                createActiveButton(this, h, params.row, params.index),
                viewButton(this, h, params.row, params.index),
                editButton(this, h, params.row, params.index),
                deleteButton(this, h, params.row, params.index)
              ])
            }
          }
        ],
        tableData: [],
        tableShow: {
          currentPage: 1,
          pageSize: 10,
          listCount: 0
        },
        searchConf: {
          type: '',
          keywords: ''
        },
      }
    },
    created() {
      this.getList()
    },
    methods: {
      changePage(page) {
        this.tableShow.currentPage = page
        this.getList()
      },
      changeSize(size) {
        this.tableShow.pageSize = size
        this.getList()
      },
      search() {
        this.tableShow.currentPage = 1
        this.getList()
      },
      getList() {
        let vm = this
        let params = {
          page: vm.tableShow.currentPage,
          size: vm.tableShow.pageSize,
          type: vm.searchConf.type,
          keywords: vm.searchConf.keywords
        }
        getList(params).then(response => {
          vm.tableData = response.data.data.list
          vm.tableShow.listCount = response.data.data.count
        })
      }
    }
  }
</script>
